<template>
  <div class="w-full">
    <!-- 外层轨道 -->
    <div
      class="w-full bg-[rgba(255,255,255,0.12)]"
      :class="[trackClass, roundedClass]"
      role="progressbar"
      :aria-valuenow="normalizedValue"
      aria-valuemin="0"
      :aria-valuemax="max"
    >
      <!-- 内层填充 -->
      <div
        class="h-full"
        :class="[roundedClass]"
        :style="[{ width: normalizedValue + '%' }, colorStyle]"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

interface Props {
  /* 当前进度值 */
  value?: number;
  /* 最大值，默认 100 */
  max?: number;
  /** 大小 */
  size?: 'mini' | 'base';
  /** 颜色类型 */
  color?: 'blue' | 'red' | 'green';
  /** 是否为圆角 */
  rounded?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  value: 0,
  max: 100,
  size: 'base',
  color: 'blue',
  rounded: true,
});

/* 将 value 映射到 0-100 区间 */
const normalizedValue = computed(() => {
  const v = Math.min(props.max, Math.max(0, props.value));
  return Math.round((v / props.max) * 100);
});

/* 尺寸对应的样式类 */
const trackClass = computed(() => {
  const sizeMap = {
    mini: 'h-1',
    base: 'h-2',
  };
  return sizeMap[props.size];
});

/* 颜色对应的样式类 */
const colorStyle = computed(() => {
  const colorMap = {
    blue: {
      background: '#487cff',
    },
    red: {
      background: '#f52e38',
    },
    green: {
      background: '#20c954',
    },
  };
  return colorMap[props.color];
});

/* 圆角配置 */
const roundedClass = computed(() => {
  return props.rounded ? 'rounded-full' : '';
});
</script>
